<template>
  <AudioPlayer :option="option" />
  <div class="listen">
    <div class="section_items_header">Section A</div>
    <div class="section_items">
      <span class="item_dir">Directions: </span>
      <span class="item_indro"
        >In this section, you will hear three news reports. At the end of each
        news report, you will hear two or three questions. Both the news report
        and the questions will be spoken only once. After you hear a question,
        you must choose the best answer from the four choices marked A), B), C)
        and D). Then mark the corresponding letter on Answer Sheet 1 with a
        single line through the centre.</span
      >
    </div>
    <el-form>
      <div
        class="section_items"
        v-for="(item, index) in questions"
        :key="index"
      >
        <div v-if="index === 0" class="section_items_questions">
          Questions 1 and 2 are based on the news report you have just heard.
        </div>
        <div v-if="index === 2" class="section_items_questions">
          Questions 3 and 4 are based on the news report you have just heard.
        </div>
        <div v-if="index === 4" class="section_items_questions">
          Questions 5 to 7 are based on the news report you have just heard.
        </div>
        <div v-if="index === 7" class="section_items_questions">
          <div class="section_items">
            <div class="section_items_header">Section B</div>
            <span class="item_dir">Directions: </span>
            <span class="item_indro"
              >In this section, you will hear two long conversations. At the end
              of each conversation,you will hear four questions. Both the
              conversation and the questions will be spoken only once. After you
              hear a question, you must choose the best answer from the four
              choices marked A), B), C) and D). Then mark the corresponding
              letter on Answer Sheet with a single line through the
              centre.</span
            >
          </div>
          Questions 8 to 11 are based on the conversation you have just heard.
        </div>
        <div v-if="index === 11" class="section_items_questions">
          Questions 12 to 15 are based on the conversation you have just heard.
        </div>
        <div v-if="index === 15" class="section_items_questions">
          <div class="section_items">
            <div class="section_items_header">Section C</div>
            <span class="item_dir">Directions: </span>
            <span class="item_indro"
              >In this section, you will hear three passages. At the end of each
              passage, you hear three or four questions. Both the passage and
              the questions will be spoken only once.After you hear a question,
              you must choose the best answer from the four choices marked A),
              B), C) and D). Then mark the corresponding letter on Answer Sheet
              1 with a single line through the centre.</span
            >
          </div>
          Questions 16 to 18 are based on the conversation you have just heard.
        </div>
        <div v-if="index === 18" class="section_items_questions">
          Questions 19 to 21 are based on the passage you have just heard.
        </div>
        <div v-if="index === 21" class="section_items_questions">
          Questions 22 to 25 are based on the passage you have just heard.
        </div>
        <div class="item_group">
          <div class="item_index">{{ index + 1 }}.</div>
          <el-radio-group v-model="selected[index]" class="radio_group">
            <div class="section_items_selection">
              <el-radio :disabled="disabledRadio" value="A">
                {{ item.question1 }}
              </el-radio>
            </div>
            <div class="section_items_selection">
              <el-radio :disabled="disabledRadio" value="B">
                {{ item.question2 }}
              </el-radio>
            </div>
            <div class="section_items_selection">
              <el-radio :disabled="disabledRadio" value="C">
                {{ item.question3 }}
              </el-radio>
            </div>
            <div class="section_items_selection">
              <el-radio :disabled="disabledRadio" value="D">
                {{ item.question4 }}
              </el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
    </el-form>
    <el-button
      style="margin-top: 10px; margin-bottom: 10px"
      type="success"
      @click="submit"
    >
      提交
    </el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import audioApi from "@/api/audio/index";
import listenRecord from "@/api/listenRecord/index";
import host from "@/utils/host";
import listenImg from "@/assets/listen.jpg"; // 在 script 部分导入图片

const route = useRoute();
const router = useRouter();
const option = reactive({
  src: "",
  title: "",
  coverImage: "",
});

// 响应式数据
const disabledRadio = ref(false);
const audio = ref();
const questions = ref([]);
const selected = ref([]);

// 获取音频数据
const getAudio = async () => {
  if (route.query.id == null || route.query.id == undefined) {
    router.push("/learning/listening");
    ElMessage.error("获取音频数据失败");
    return;
  }
  try {
    const res = await audioApi.getById(route.query.id);
    audio.value = res.data;
    option.src = res.data.path;
    option.title = res.data.name;
    option.coverImage = listenImg; // 然后在需要使用的地方
    questions.value = JSON.parse(audio.value.questions);
  } catch (error) {
    ElMessage.error("获取音频数据失败");
  }
};

// 比较答案
const compareArray = () => {
  const arr = JSON.parse(audio.value.answers);
  let rightNum = 0;
  for (let index = 0; index < arr.length; index++) {
    if (arr[index] === selected.value[index]) {
      rightNum++;
    }
  }
  return rightNum * 4;
};

// 显示结果
const showResult = async (result) => {
  ElMessage.info(`您的得分是：${result}`);
  // 记录成绩
  await listenRecord.updateScore(result, audio.value.id);
  // 延迟跳转到原文页面
  setTimeout(() => {
    router.push({
      path: "/learning/listening",
    });
  }, 1500);
};

// 提交答案
const submit = async () => {
  disabledRadio.value = true;
  const selectedCount = selected.value.filter(Boolean).length;
  if (selectedCount < 25) {
    ElMessageBox.confirm("还有未选择的题目，是否继续提交？", "提示", {
      confirmButtonText: "直接交卷",
      cancelButtonText: "检查一下",
      type: "warning",
    })
      .then(() => {
        const result = compareArray();
        showResult(result);
      })
      .catch((error) => {
        ElMessage.info("已取消提交", error);
      });
  } else {
    const result = compareArray();
    showResult(result);
  }
};

// 生命周期钩子
onMounted(() => {
  getAudio();
});
</script>

<style scoped>
div {
  margin-top: 20px;
}
.listen {
  margin-left: 5px;
  font-family: Calibri;
}
.item_group {
  display: flex;
  flex-direction: row;
}
.item_index {
  margin-top: 12px;
}
.radio_group {
  margin-top: 2px;
  margin-left: 5px;
}
.section_items_questions {
  margin-top: -10px;
  margin-bottom: -20px;
  font-weight: bold;
}
.section_items_selection {
  margin-top: -10px;
}
.section_items_header {
  font-weight: bold;
}
.item_dir {
  font-weight: bold;
}
.item_indro {
  font-style: italic;
  font-weight: bold;
}
</style>
